<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表渲染key值的原理与作用</title>
        <script
            type="text/javascript"
            src="../vue.js"
        ></script>
    </head>
    <body>

        <div id="root">
            <!--遍历数组-->
            <h2>人员列表</h2>
            <button @click.once="add()">点击添加一个老刘：</button>
            <ul>
                <li v-for="(p,index) in persons" :key="id">
                    {{p.name}}-{{p.age}}
                    <input type="text">
                </li>
            </ul>


        </div>
        <!--react,vue中的key有什么作用？（key的内部原理）
        1.虚拟dom中key的作用：key是虚拟dom对象的标识，当状态中的数据发生变化时，vue会根据新数据生成新的虚拟dom，随后与旧的进行对比
        2.比较规则：（1）找到相同的key值：对比替换（2）没有找到相同的key值：生成新的真实dom，随后替换掉之前的真实dom
        3.用index作为key可能会引发问题：
        (1)对数据进行逆序添加，逆序删除等破坏顺序的操作，会产生没有必要的真实dom更新-----》界面效果没有问题，但是效率低
       （2）如果结构中包含输入类的dom（用户在真实dom中有数据残留，但是vue不会转化到虚拟dom中），会产生错误的dom更新-----》界面展示有问题
       4.如何选择key值？最好使用每条数据的唯一标识作为key，如id，身份证号。如果不存在对数据的逆序添加，逆序删除等破坏顺序的操作，仅用于渲染列表用于展示，
       则可以使用index作为key值。

        -->
        <script type="text/javascript">
            Vue.config.productionTip = false;
            new Vue({
                el: '#root',
                data: {
                    persons:[
                        {id:'00',name:'Bob',age:'22'},
                        {id:'01',name:'Lily',age:'23'},
                        {id:'02',name:'Jenny',age:'24'},
                    ],
                    car:{
                        name:'aodiA8',
                        price:'70w',
                        color:'white'
                    },
                    str:'hello'
                },
                methods:{
                    add(){
                        const p={id:'04',name:'老刘',age:'30'};
                        this.persons.unshift(p);
                    }
                }
            })
        </script>

    </body>
</html>